import React, { useEffect, useState } from "react";
import { qing } from "../../request/index";
import { useParams } from "react-router-dom";
import { NotesO } from "@react-vant/icons";
import { Toast, NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
function Xiang() {
  const [list, setList] = useState([]);
  const { id } = useParams();
  const navigate = useNavigate();
  useEffect(() => {
    qing(id).then((res) => {
      setList(res.data.data);
    });
  }, []);

  return (
    <div>
      <div>
        <NavBar title="详情" onClickLeft={() => navigate(-1)} />
      </div>
      <div style={{ padding: "20px", boxSizing: "border-box" }}>
        <div style={{ width: "100%", height: "300px", background: "red" }}>
          <img
            style={{ width: "100%", height: "100%" }}
            src="https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1733590800&t=0aaf14b3d9be8bb23ff3da1e4afd3a14"
            alt=""
          />
        </div>
        <div>
          <h3>历史文物展</h3>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "20px",
            boxSizing: "border-box",
          }}
        >
          <p style={{ fontWeight: "bold" }}>2024-12-20</p>
          <p>周五</p>
          <p>
            <NotesO style={{ color: "orange", fontSize: "30px" }} />
          </p>
        </div>
        <div>
          <p>
            展出了一系列珍贵的历史文物，涵盖了各个朝代，为观众呈现了丰富的历史文化画卷，感受古人的智慧与生活。
          </p>
        </div>
      </div>
      <div style={{position: "fixed", bottom: "0", width: "100%", height: "50px", background: "white",padding:'0 20px',boxSizing: "border-box"}}>
        <div style={{display: "flex", justifyContent: "space-between",}}>
          <p style={{fontWeight: "bold"}}>￥299</p>
          <p onClick={()=>navigate('/gou')}>
            <button style={{width: "100px", height: "30px", background: "orange", color: "white", border: "none", borderRadius: "5px"}}>立即购票</button>
          </p>
        </div>
      </div>
    </div>
  );
}

export default Xiang;
